<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-21 16:11:30
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-17 17:13:28
 * @FilePath: \sr_system_manager_ui\src\views\achievementReward\assessmentReward\researchAssessment\index.vue
 * @Description: 科研考核列表
-->
<template>
  <div class="research-reward-container">
    <TableForm ref="tableRef" :auto-height="true" :data="dataList" :columns="columns" :tableLoading="loading" :total-count="total"
      :showPagination="true" :showToolBar="true"
      :hide-right-first-btn="true"
      :hide-right-second-btn="true"
      :hide-right-third-btn="true"
      :hide-right-forth-btn="true"
      @refresh="getData"
    >
      <template #leftMenu>
        <el-button type="primary" @click="handleEdit({}, 'add')" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:addStatistics']">新增统计</el-button>
      </template>
      <template #status="{ record }">
        <div class="flex items-center space-x-[8px]">
          <span class="h-[6px] w-[6px] rounded-[3px]"
            :style="{ backgroundColor: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }" />
          <span
            :style="{ color: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }">{{
              assessmentStatusMap[record.status as keyof typeof assessmentStatusMap] }}</span>
        </div>
      </template>
      <template #default="{ record }">
        <el-button v-if="record.status !== 1" link type="primary" @click="handleEdit(record, 'view')" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:view']">查看</el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleEdit(record, 'edit')" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:edit']">编辑</el-button>
        <el-button v-if="record.status !== 1" link type="primary" @click="handleSet(record)" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:basicWorkloadSetting']">基础工作量设定</el-button>
        <el-button v-if="record.status !== 1" link type="primary" @click="handleResult(record.year)" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:assessmentResult']">考核结果</el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleStart(record)" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:startAssessment']">开启考核</el-button>
        <el-button v-if="record.status === 2" link type="danger" @click="handleFinish(record)" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:endAssessment']">结束考核</el-button>
        <el-button v-if="record.status === 1" link type="danger" @click="handleDelete(record)" v-hasPermi="['achievementReward:assessmentReward:researchAssessment:del']">删除</el-button>
      </template>
    </TableForm>

    <!-- 新增/编辑/查看 -->
    <EditModal v-if="editVisible" :visible="editVisible" :id="currentRow.id" :type="assessmentType"
      @cancel="editCancel" />

    <!-- 基础工作量设定 -->
    <BasicWorkloadSettingModal v-if="setVisible" :visible="setVisible" :id="currentRow.id" :type="setType"
      @cancel="setVisible = false" />

    <!-- 删除提示 -->
    <DelConfirmModal v-if="delVisible" :visible="delVisible" :loading="delLoading" text="删除后无法恢复，是否确认删除？"
      @cancel="delVisible = false" @ok="deleteReward({ id: currentRow.id })" />

    <!-- 开启奖励提示 -->
    <DelConfirmModal v-if="startVisible" :visible="startVisible" :loading="updateLoading"
      :text="`是否确定开启${currentRow.name}？`" ok-type="primary" ok-text="开启" @cancel="startVisible = false"
      @ok="updateReward({ id: currentRow.id, status: 2 })" />

    <!-- 结束奖励提示 -->
    <DelConfirmModal v-if="finishVisible" :visible="finishVisible" :loading="updateLoading"
      :text="`是否确定结束${currentRow.name}？`" ok-text="结束" @cancel="finishVisible = false"
      @ok="updateReward({ id: currentRow.id, status: 3 })" />

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import EditModal from './components/EditModal.vue'
import BasicWorkloadSettingModal from './components/BasicWorkloadSettingModal.vue';
import formateDate from '@/utils/formateDate'
import { assessmentPage, assessmentDelete, assessmentUpdateStatus } from '@/api/assessment';
import { assessmentStatusMap, assessmentStatusBgColorMap } from '@/utils/constText'
import { PageBeanAssessmentPageRespVO, AssessmentPageRespVO, BaseSuccessRespDTO, AssessmentUpdateStatusReqDTO } from '@/api/assessment/types';

const router = useRouter()

const tableRef = ref()
const dataList = ref<AssessmentPageRespVO[]>([])
const total = ref(0)
const columns = ref([
  {
    title: '序号',
    width: 48,
    dataIndex: 'index',
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return index + 1
    }
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '统计年度',
    dataIndex: 'year',
    width: 100,
  },
  {
    title: '起止时间',
    dataIndex: 'time',
    formatter: (row: any) => {
      return `${formateDate(row.startTime).format('YYYY-MM-DD')}~${formateDate(row.endTime).format('YYYY-MM-DD')}`
    },
    width: 200
  },
  {
    title: '管理办法',
    dataIndex: 'assessmentMethodName',
    tooltip: true,
  },
  {
    title: '统计状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100
  },
  {
    title: '操作',
    width: 350,
    dataIndex: 'default',
    slotName: 'default',
  }
])

const setType = ref('')
const setVisible = ref(false)

// 新增/编辑
const editVisible = ref(false)
const currentRow = ref<AssessmentPageRespVO>({})
const assessmentType = ref('')

// 删除
const delVisible = ref(false)

// 开启/结束 奖励
const startVisible = ref(false)
const finishVisible = ref(false)

const refresh = () => {
  tableRef.value?.refreshInitPage()
}

const { run: getData, loading } = useRequest(assessmentPage, {
  manual: true,
  onSuccess: (res: PageBeanAssessmentPageRespVO) => {
    const { content, totalElements } = res || {}
    dataList.value = content || []
    total.value = totalElements || 0
  }
})

const { run: deleteReward, loading: delLoading } = useRequest(assessmentDelete, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      delVisible.value = false
      ElMessage({
        message: '删除成功!',
        type: 'success',
        plain: true,
      })
      refresh()
    }
  }
})

const { run: updateReward, loading: updateLoading } = useRequest(assessmentUpdateStatus, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO, params: AssessmentUpdateStatusReqDTO) => {
    if (res?.isSuccess) {
      startVisible.value = false
      finishVisible.value = false
      ElMessage({
        message: `${params[0].status === 2 ? '开启' : '结束'}成功!`,
        type: 'success',
        plain: true,
      })
      refresh()
    }
  }
})

const handleEdit = (row: AssessmentPageRespVO, type: string) => {
  currentRow.value = row
  assessmentType.value = type
  editVisible.value = true
}

const editCancel = (isUpdate: false) => {
  editVisible.value = false
  if (isUpdate) {
    refresh()
  }
}

const handleDelete = (row: AssessmentPageRespVO) => {
  currentRow.value = row
  delVisible.value = true
}

const handleStart = (row: AssessmentPageRespVO) => {
  currentRow.value = row
  startVisible.value = true
}

const handleFinish = (row: AssessmentPageRespVO) => {
  currentRow.value = row
  finishVisible.value = true
}

const handleSet = (row: AssessmentPageRespVO) => {
  currentRow.value = row
  setType.value = row.status === 2 ? 'edit' : 'view'
  setVisible.value = true
}

const handleResult = (year: number) => {
  router.push({
    path: '/achievementReward/assessmentReward/researchAssessment/assessmentResult',
    query: {
      year
    }
  })
}

onMounted(() => {
  refresh()
});
</script>

<style scoped lang="scss">
.research-reward-container {
  --at-apply: px-[20px] pb-[20px] bg-white rounded-[4px];
}
</style>